<template>
  <Page>
    <template v-slot:content>
      <div class='h-full'>
        <div class='container flex flex-col h-full'>
          <!-- 用户信息 -->
          <div class='user-info border-797979 flex-center my-12px ml-12px'>
            <img class='icon' src='static/icons/user.svg' alt='' />
            <span class='ml-8px text-333'>小明</span>
          </div>
          <!-- 应用列表 -->
          <div class='apps-wrap flex-1 overflow-scroll'>
            <div class='list flex flex-wrap justify-center'>
              <div
                class='item border-797979 px-24px py-8px'
                v-for='(i, index) in apps.list'
                :key='index'
                :style="!i.name ? 'visibility:hidden' : ''"
                @click='apps.navigator(i.path, i)'
              >
                <img class='cover' src='static/icons/img.svg' alt='' />
                <div class='name mt-4px text-center'>
                  {{ i.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/index'
import { dictMap } from '@/views/dict/index'

export default {
  components: {
    Page
  },
  data() {
    return {
      phUrl: '',
      apps: {
        list: [
          {
            name: '作业',
            path: 'homework'
          },
          {
            name: '错题本',
            path: 'wq-book'
          },
          {
            name: '习题中心',
            path: 'exercise'
          },
          {
            name: '学习资料',
            path: 'learning'
          },
          {
            name: '每日打卡',
            path: 'daily'
          },
          {
            name: '考试',
            path: 'exam'
          },
          {
            name: '成绩录入',
            path: 'homework-input'
          },
          {
            name: '家校联系',
            path: 'contact'
          },
          {
            name: dictMap[1],
            path: 'dict-yh'
          },
          {
            name: dictMap[2],
            path: 'dict-hy'
          },
          {
            name: dictMap[3],
            path: 'dict-h'
          },
          {
            name: dictMap[4],
            path: 'dict-gh'
          },
          {
            name: '语文作文',
            path: 'correct-chinese'
          },
          {
            name: '英语作文',
            path: 'correct-english'
          },
          {
            name: '请假',
            path: 'ask-for-leave'
          },
          {
            name: '课堂导学',
            path: 'class-guidance'
          }
        ],
        navigator: (path, item) => {
          if (!path) return
          let params = this.$route.query
          // 解码
          let tokenStr = window.atob(params['token'])
          tokenStr += `module=${path}&`
          // 编码
          let tokenEnCode = window.btoa(tokenStr)
          // location.href = `https://test.star-guidelines.cn/assistant-student-app/redirect.html?v=${new Date().getTime()}#/pages/redirect/index?token=${tokenEnCode}`
          location.href = `https://localhost:3000/assistant-student-app/redirect.html?v=${new Date().getTime()}#/pages/redirect/index?token=${tokenEnCode}`
          // this.$router.push(path)
        }
      }
    }
  },
  onLoad() {
  },
  methods: {}
}
</script>

<style lang='scss' scoped>
.container {
  font-size: 16px;

  .user-info {
    width: 140px;
    height: 52px;
    border-width: 1px;
    border-style: solid;
    border-radius: 25px;

    .icon {
      width: 40px;
      height: 40px;
    }
  }

  .apps-wrap {
    .list {
      width: 900px;
      margin: 0 auto;

      .item {
        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        margin-right: 26px;
        margin-bottom: 26px;

        &:nth-child(4n) {
          margin-right: 0;
        }

        .cover {
          width: 120px;
          height: 96px;
        }
      }
    }
  }
}
</style>
